<template>
  <div class="weekly-report-management">
    <div v-if="device !== 'mobile'" class="pc">
      <weeklyListPc ref="weeklyListPc"></weeklyListPc>
    </div>

    <div v-else class="mobile">
      <weeklyListMobile ref="weeklyListMobile"></weeklyListMobile>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import weeklyListPc from "./components/pc/weeklyListPc.vue";
import weeklyListMobile from "./components/mobile/weeklyListMobile.vue";
export default {
  name: "weeklyList",
  components: { weeklyListPc, weeklyListMobile },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["device"]),
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if(vm.device !== "mobile"){
        if (to.query.visible) {
          vm.$refs.weeklyListPc.handleAdd();
        }
        vm.$refs.weeklyListPc.queryParams.queryValue = to.query.queryValue || "0";
        vm.$refs.weeklyListPc.init()
      }
    });
  },
  created() {
    this.$nextTick(() => {
      if (this.device !== "mobile") {
        // this.$refs.weeklyListPc.init();
      } else {
        this.$refs.weeklyListMobile.getList();
      }
    });
  },
  watch: {
    device(newVal, oldVal) {
      this.$nextTick(() => {
        if (this.device !== "mobile") {
          this.$refs.weeklyListPc.init();
        } else {
          this.$refs.weeklyListMobile.init();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
